<template>
	<div>
		<!-- <quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" /> -->
		<el-upload
			class="avatar-uploader"
			action="https://test.beauty-iot.com/appt/api/common/uploadImage"
			:show-file-list="false"
			:on-success="handleAvatarSuccess"
			:before-upload="beforeAvatarUpload"
		>
			<img v-if="imageUrl" :src="imageUrl" class="avatar" />
			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		</el-upload>
		<div>点击图片本身更换图片</div>
		<el-button class="btn_submit" type="primary" @click="submit">提交</el-button>
	</div>
</template>

<script>
/* import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css'; */
import { descriptionImg,editDescriptionImg } from '../../../server/index.js';
import Cookie from 'js-cookie';
export default {
	// components: {
	// 	quillEditor
	// },
	data() {
		return {
			/* content: '',
			editorOption: {} */
			imageUrl:''
		};
	},
	mounted() {
		this.descriptionImgData();
		Cookie.remove('tabList');
	},
	methods: {
		handleAvatarSuccess(res, file) {
			this.imageUrl = file.response.data.imgUrl;
		},
		beforeAvatarUpload(file) {
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		descriptionImgData(){
			const _this = this;
			_this.http.request({
				url: descriptionImg,
				data: '',
				success: function(res) {
					_this.imageUrl = res.descriptImg 
				},
				error:function(err){
					_this.$message({
						offset: '200',
						message: err.msg
					})
				}
			});
		},
		submit() {
			const _this = this;
			_this.http.request({
				url: editDescriptionImg,
				data: {descriptImg:_this.imageUrl},
				success: function() {
					_this.$message({
						message:'保存成功',
						offset:'200'
					});
				},
				error:function(err){
					_this.$message({
						offset: '200',
						message: err.msg
					})
				}
			});
		}
	}
};
</script>

<style>
	.avatar{
		width: 646px;
		height: 864px;
	}
	.ql-editor{
		height: 500px;
	}
	.btn_submit{
		margin-top: 50px;
	}
	
</style>
